<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> -->
	<title>Document</title>
</head>
<style>
	*{margin: 0;padding: 0;}
	body{width: 99.7%;border: 2px solid #fff;background-color: #4de1f7;}
	.top{width:100%;height: 30px;/*border: 1px solid #fff;*/}
	.time{color: #fff;margin-left: 200px;float:left;}
	.time1{width: 300px;height: 20px;background-color: #fff;margin-top: 12px;margin-left: 280px;border: 1px solid #fff;border-radius: 10px;text-align: center;}
	.kqww{color: #fff;margin-left: 750px;margin-top: -25px;}
	.kqww1{margin-left: 830px;margin-top: -20px;background-color: #fff;border-radius: 10px;border: 1px solid #fff;width: 100px;height: 20px;}
	.kqws{color: #fff;margin-left: 1300px;margin-top: -25px;}
	.kqws1{margin-left: 1380px;margin-top: -20px;background-color: #fff;border-radius: 10px;border: 1px solid #fff;width: 100px;height: 20px;}
	.box{width: 100%;height: 470px;/*border: 1px solid #000;*/}
	.left{width:360px;height: 470px;background-color: #00bcd4;border-radius: 10px;/*float: left;*/position: absolute;left: 370px;}
	.left p{color: #fff;line-height: 40px;font-size: 20px;}
	.div{width: 150px;height: 350px;margin-left: 40px;margin-top: -390px;}
	.div1{width: 150px;height: 20px;background-color: #000;border: 1px solid #fff;color: #fff;margin: 0px 0px 18px 0px;text-align: center;}
	.left_qd{width: 50px;height: 380px;/*border: 1px solid #fff;*/margin-top: -350px;margin-left: 200px;}
	.left_qd input{width: 50px;margin: 0px 0px 18px 0px;border-radius: 5px;}
	#left_x{width: 20px;height: 380px;/*border: 1px solid #fff;*/margin-top: -380px;margin-left: 240px;}
	#left_x input{margin: 0px 0px 20px 20px;width: 20px;height: 20px;}
	.left_g{width: 50px;height: 380px;margin-top: -380px;margin-left: 290px;}
	.left_g input{width: 50px;margin: 0px 0px 18px 0px;border-radius: 5px;}
	.middle{width: 525px;height: 470px;background-color: #00bcd4;border-radius: 10px;position: absolute;margin-left: 1168px;}
	.box1{width: 500px;height: 70px;border: 2px solid #fff;margin-top: 30px;margin-left: 10px;border-radius: 10px;}
	.box1 span{color: #fff;margin-left: 50px;}
	.box1 input{margin-left: 50px;}
	.middle_box{width: 500px;height: 30px;margin-top: 10px;}
	.middle_box span{margin-left: 40px;}
	.middle_box input{width: 30px;margin-left:0px;}
	.middle_j{color: #fff;font-size: 20px;text-align: center;margin-top: 10px;}
	.middle_c{width: 525px;height: 240px;/*border: 1px solid #fff;*/margin-top: 30px;}
	.middle_c span{color: #fff;}
	.middle_c input{width: 100px;}
	.middle_a{width: 525px;height: 80px;}
	.middle_a input{width: 20px;height: 20px;margin-left: 130px;}
	.right{width: 360px;height: 470px;background-color:#00bcd4;border-radius: 10px;/*position: absolute;*/float: left;}
	.right span{color: #fff;margin-left: 8px;}
	.right input{background-color: #fff;width: 100px;text-align: center;}
	.right_r{width: 340px;height: 50px;border: 2px solid #fff;margin-left: 9px;border-radius: 10px;}
	.right_t{width: 340px;height: 270px;border: 2px solid #fff;margin-left: 9px;line-height: 38px;border-radius: 10px;}
	.cflb{width: 900px;height: 20px;/*border: 1px solid #fff;*/color: #fff;}
	.cf{width: 100%;height: 250px;background-color: #00bcd4;border-radius: 10px;float: left;}
	.cf img{width: 70px;height: 70px;margin: 20px 25px 25px 100px;}
	/*.cf ul li{list-style: none;width: 72px;height: 72px;display: inline;margin: 70px;display: inline-block;}*/
	.cf1{width: 100%;height: 250px;/*border: 1px solid #fff;*/}
	#mx{width: 420px;height: 470px;background-color: #00bcd4;border-radius: 10px;position: absolute;margin-left: 737px;}
</style>
<body>
	<div class="top">
		<div class="time">当前时间</div>  
		<div class="time1"></div>
		<div class="kqww">库区外温</div>
		<div class="kqww1"></div>
		<div class="kqws">库区外湿</div>
		<div class="kqws1"></div>
	</div>
	<div class="box">
		<div class="left">
		<div>智慧粮仓房智控制设备</div>
			<p>K20</p>
			<p>K19</p>
			<p>K18</p>
			<p>K17</p>
			<p>K16</p>
			<p>K15</p>
			<p>K14</p>
			<p>K13</p>
			<p>K12</p>
			<p>K11</p>
			<div class="div">
				<div class="div1">轴流风机1</div>
				<div class="div1">轴流风机2</div>
				<div class="div1">窗口1</div>
				<div class="div1">窗口2</div>
				<div class="div1">轴流风机口1</div>
				<div class="div1">轴流风机口2</div>
				<div class="div1">地槽通风口</div>
				<div class="div1">离心风机</div>
				<div class="div1">备用接口1</div>
				<div class="div1">备用接口2</div>
			</div>
			<div class="left_qd">
				<input type="button" name="" value="启动">
			    <input type="button" name="" value="启动">
			    <input type="button" name="" value="启动">
			    <input type="button" name="" value="启动">
			    <input type="button" name="" value="启动">
			    <input type="button" name="" value="启动">
			    <input type="button" name="" value="启动">
			    <input type="button" name="" value="启动">
			    <input type="button" name="" value="启动">
			    <input type="button" name="" value="启动">
			</div>
			<div id="left_x">
				<input type="checkbox" name="" value="">
			    <input type="checkbox" name="" value="">
			    <input type="checkbox" name="" value="">
			    <input type="checkbox" name="" value="">
			    <input type="checkbox" name="" value="">
			    <input type="checkbox" name="" value="">
			    <input type="checkbox" name="" value="">
			    <input type="checkbox" name="" value="">
			    <input type="checkbox" name="" value="">
			    <input type="checkbox" name="" value="">
			</div>
			<div class="left_g">
				<input type="button" name="" value="关">
			    <input type="button" name="" value="关">
			    <input type="button" name="" value="关">
			    <input type="button" name="" value="关">
			    <input type="button" name="" value="关">
			    <input type="button" name="" value="关">
			    <input type="button" name="" value="关">
			    <input type="button" name="" value="关">
			    <input type="button" name="" value="关">
			    <input type="button" name="" value="关">
			</div>
			<input onclick="ck(true)" style="width:50px;height:30px;border-radius: 5px;margin-left:60px;margin-top:10px;" type="button" name="" value="全选">
			<input onclick="ck(false)" style="width:50px;height:30px;border-radius: 5px;" type="button" name="" value="清空"><br>
			<span>注:被勾选的设备将一起连动工作</span>
		</div>
		<div class="middle">
		<div>专家决策系统</div>
			<div class="box1">
				<span>品种</span>
				<select name="" id="">
					<option value="稻谷">稻谷</option>
					<option value="玉米">玉米</option>
					<option value="玉米">小麦</option>
					<option value="玉米">大豆</option>
				</select>
				<span>输入水分</span>
				<select multiple size=1 style="width:'160'">
				    <option value="1">1</option>
				    <option value="1">1</option>
				    <option value="1">13.4</option>
				    <option value="1">20.2</option>
				    <option value="1">20.2</option>
				    <option value="1">20.2</option>
				    <option value="1">20.2</option>
				</select>
				<input type="button" name="" value="查询"><br>
				<div class="middle_box">
					<span>粮温</span>
					<input type="text" name="" value="">
					<span>仓温</span>
					<input type="text" name="" value="">
					<span>外温</span>
					<input type="text" name="" value="">
					<span>外湿</span>
					<input type="text" name="" value="">
				</div>
			</div>
			<div class="middle_j">决策结果选择</div>
			<div class="middle_c">
				<span>仓内接近</span>
			    <span>水分</span>
			    <input type="text" name="" value="">
			    <span>温度</span>
			    <input type="text" name="" value="">
			    <span>湿度</span>
			    <input type="text" name="" value="">
			    <div class="middle_a">
			    	<input type="checkbox" name="" value="">
			        <span>降温通风</span>
			        <input type="checkbox" name="" value="">
			        <span>降水通风</span>
			        <input type="checkbox" name="" value="">
			        <span>保水通风</span>
			        <input type="checkbox" name="" value="">
			        <span>排空间积热</span>
			        <input type="checkbox" name="" value="">
			        <span>自然通风</span>
			        <input type="checkbox" name="" value="">
			        <span>膜下通风</span>
			    </div>
			    <span>勾选确定项</span>
			    <input style="float:right;" type="button" name="" value="确定"><br>
			    <span>选择目标温度</span>
			    <select name="" id="">
			    	<option value="15">15</option>
			    	<option value="18">18</option>
			    	<option value="21">21</option>
			    	<option value="23">23</option>
			    </select>
			    <span>选择温差</span>
			    <select name="" id="">
			        <option value="10">10</option>
			    	<option value="9">9</option>
			    	<option value="8">8</option>
			    	<option value="7">7</option>
			    	<option value="6">6</option>
			    </select><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			    <span>外湿下限</span>
			    <select name="" id="">
			    	<option value="40">40</option>
			    	<option value="40">38</option>
			    	<option value="40">35</option>
			    </select>
			    <span>外湿上限</span>
			    <select name="" id="">
			    	<option value="70">70</option>
			    	<option value="70">73</option>
			    	<option value="70">75</option>
			    </select><br>
			    <span>通风后可能</span>
			    <span>水分</span>
			    <input type="text" name="" value="">
			    <span>温度</span>
			    <input type="text" name="" value="">
			    <span>湿度</span>
			    <input type="text" name="" value="">
			</div>
		</div>
		<div class="right">
		<div>智慧粮仓实测粮温</div>
			<span>A点温度</span>
			<input type="text" name="" value="" id="int">
			<span>B点温度</span>
			<input type="text" name="" value="">
			<span>C点温度</span>
			<input type="text" name="" value="">
			<span>D点温度</span>
			<input type="text" name="" value="">
			<span>E点温度</span>
			<input type="text" name="" value="">
			<div>任务信息</div>
			<div class="right_r">
				<span>运行状态</span>
				<input type="text" name="" value="运行">
				<input type="button" name="" value="重置任务"><br>
				<span>开始时间</span>
				<input type="text" name="" value="2018-1-1">
			</div>
			<div>通风成本核算</div>
			<div class="right_t">
				<span>输入粮食数量</span>
				<input type="text" name="" value="" id="input1">
				<span>顿</span><br>
				<span>输入风机功率</span>
				<input type="text" name="" value="" id="input2">
				<span>KW</span><br>
				<span>输入用电单价</span>
				<input type="text" name="" value="" id="input3">
				<span>元/KW</span><br>
				<span>通风时间</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="text" name="" value="" id="input4">
				<span>小时</span><br>
				<span>通风前后温差</span>
				<input type="text" name="" value="" id="input5">
				<span>℃</span><br>
				<button>结果</button><br>
				<span>通风成本为</span>&nbsp;&nbsp;&nbsp;
				<input type="text" name="" value="" id="result">
				<span>元/顿*℃</span>
			</div>
		</div>
		<div id="mx">
		    <!-- <img src="img/yuan.png" alt="yuan"> -->
			<!-- <input type="button" name="" value="切换"> -->
			<img src="img/zheng.png" class="wujiang_pic_size" id="caocao_pic"  onClick="change_pic()">
		</div>
	</div>
	<div class="cflb">仓房列表
	(通风成本就算公式=通风时间*风机功率*电价/(粮食数量*通风前后温差))</div>
	<div class="cf1">
	    <div class="cf">
	    	<img src="img/demo8.png" alt="demo8" onclick="showImga()">
	    	<img src="img/demo7.png" alt="demo7" onclick="showImg()">
	    	<img src="img/demo8.png" alt="demo8" onclick="showImgb()">
	    	<img src="img/demo8.png" alt="demo8" onclick="showImgc()">
	    	<img src="img/demo8.png" alt="demo8" onclick="showImgd()">
	    	<img src="img/demo7.png" alt="demo7" onclick="showImg1()">
	    	<img src="img/demo7.png" alt="demo7" onclick="showImg2()">
	    	<img src="img/demo7.png" alt="demo7" onclick="showImg3()"><br>
	    	<img src="img/demo7.png" alt="demo7" onclick="showImg4()">
	    	<img src="img/demo7.png" alt="demo7" onclick="showImg5()">
	    	<img src="img/demo7.png" alt="demo7" onclick="showImg6()">
	    	<img src="img/demo8.png" alt="demo8" onclick="showImge()">
	    	<img src="img/demo8.png" alt="demo8" onclick="showImgf()">
	    	<img src="img/demo8.png" alt="demo8" onclick="showImgg()">
	    	<img src="img/demo8.png" alt="demo8" onclick="showImgh()">
	    	<img src="img/demo7.png" alt="demo7" onclick="showImg7()">
	    </div>
	</div>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
	<script>
	//文本框数值
	
	//通风成本
    $(document).ready(function() { 
        $("button").click(function(){ 
            var input1=$("#input1").val(); 
            var input2=$("#input2").val(); 
            var input3=$("#input3").val(); 
            var input4=$("#input4").val(); 
            var input5=$("#input5").val();  
            $("#result").attr("value",input4*input2*input3/(input1*input5)); 
        }); 
        // $("#caocao_pic").click(function() { 
	       //  var imgObj = document.getElementById("caocao_pic"); 
	       //  var Flag=(imgObj.getAttribute("src",2)=="img/zheng.png") 
	       //  imgObj.src=Flag?"img/fan.png":"img/zheng.png"; 
	    }); 
    //复选框全选消除
    function ck(b){
    	var left=document.getElementById("left_x");
    	var input = left.getElementsByTagName("input");for (var i=0;i<input.length ;i++ ){if(input[i].type=="checkbox")input[i].checked = b;}}
    //时间函数
    //服务器时间
    function getNow() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        if (hour < 10) {
            hour = "0" + hour;
        }
        var minute = date.getMinutes();
        if (minute < 10) {
            minute = "0" + minute;
        }
        var second = date.getSeconds();
        if (second < 10) {
            second = "0" + second;
        }
        var now = year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + second;
        $('.time1').html(now);
    }
    setInterval('getNow()', 1000);
    //模型 前后切换
    function change_pic(){ 
        var imgObj = document.getElementById("caocao_pic"); 
        var Flag=(imgObj.getAttribute("src",2)=="img/zheng.png") 
        imgObj.src=Flag?"img/fan.png":"img/zheng.png"; 
   } 
   //点击仓库出现相应图片
    function showImg(){
   	    var imgUrl="img/yuan.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImg1(){
   	    var imgUrl="img/yuan1.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImg2(){
   	    var imgUrl="img/yuan2.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImg3(){
   	    var imgUrl="img/yuan3.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImg4(){
   	    var imgUrl="img/yuan4.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImg5(){
   	    var imgUrl="img/yuan5.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImg6(){
   	    var imgUrl="img/yuan6.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImg7(){
   	    var imgUrl="img/yuan7.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	    // document.getElementById("caocao_pic").src=imgUrl;
   	function showImga(){
   	    var imgUrl="img/zheng.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImgb(){
   	    var imgUrl="img/zheng1.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImgc(){
   	    var imgUrl="img/zheng2.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImgd(){
   	    var imgUrl="img/zheng3.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImge(){
   	    var imgUrl="img/zheng4.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImgf(){
   	    var imgUrl="img/zheng5.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImgg(){
   	    var imgUrl="img/zheng6.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	function showImgh(){
   	    var imgUrl="img/zheng7.png";
   	    document.getElementById("mx").innerHTML="<img src="+imgUrl+" />";}
   	     // document.getElementById("caocao_pic").src=imgUrl;
	</script>
</body>
</html>